<script setup lang="tsx">
import { getPushSettings, setPushSettings } from '../../apis/profile';

// const data = reactive([
  // { title: '开启消息推送', value: enablePushMessages, subTitle: '实时推送监控动态至青绿WEB端/APP端的消息中心' },
  // { title: '系统消息', value: systemMessages },
  // { title: '会员福利', value: memberBenefits },
  // { title: '企业动态', value: enterpriseDynamics },
  // { title: '快讯', value: alerts }
// ]);
//
// const enterpriseData = reactive([
//   { title: '自选企业', value: enablePushMessages }
// ]);

let data = $ref<any[]>([]);
let enterpriseData = $ref<any[]>([]);


let isLoad = $ref(false);

const { run: reqPushSetting } = useRequest(getPushSettings, {
  defaultParams: [{ type: 1 }],
	onSuccess(res) {
    data = res?.configDetail?.[0]?.details.map(item => {
      item.status = !!item.status;
      return item;
    });
    enterpriseData = res?.configDetail?.[1]?.details.map(item => {
      item.status = !!item.status;
      return item;
    });
    setTimeout(() => {
      isLoad = true;
    });
	}
});

const { run } = useRequest(setPushSettings, {
	manual: true,
  onSuccess() {
    reqPushSetting({ type: 1 });
  }
});

// 系统消息变化
const handleChange = (index) => {
  if (isLoad) {
    run({
      id: data[index].id,
      switch: data[index].status ? 1 : 0,
      type: 1
    });
  }
};

// 我的监控变化
const handleEnterpriseChange = (index) => {
  if (isLoad) {
    run({
      id: enterpriseData[index].id,
      switch: enterpriseData[index].status ? 1 : 0,
      type: 2
    });
  }
};

defineRender(() => {
  return (
    <div class="p-24px container">
      <ul class="w-210px">
        {
          data?.map((item, index) => {
            return <li class="item" key={index}>
              <span class="title">{item.name}</span>
              <div class="relative">
                <el-switch  style="--el-switch-on-color: #02C680;" v-model={item.status} onChange={() => handleChange(index)}/>
              </div>
            </li>;
          })
        }
      </ul>
      <vc-divider></vc-divider>
      <span class="title mb-10px block">我的监控</span>
      <ul class="w-210px">
        {
          enterpriseData?.map((item, index) => {
            return <li class="item" key={index}>
              <span class="title">{item.name}</span>
              <el-switch style="--el-switch-on-color: #02C680;" v-model={item.status} onChange={() => handleEnterpriseChange(index)}/>
            </li>;
          })
        }
      </ul>
    </div>
  );
});
</script>

<style lang="scss" scoped>
.container {
  .title {
    font-weight: 500;
    font-size: 14px;
    color: #333333;
  }
  
  .item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 40px;
  }
  
  .subTitle {
    position: absolute;
    left: 50px;
    top: 7px;
    font-weight: 400;
    font-size: 12px;
    width: max-content;
    color: #999999;
  }
}
</style>
